<!--
 * @Author       : ShiJunJie
 * @Date         : 2022-04-15 15:46:55
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-04-18 16:33:35
 * @FilePath     : /src/components/Bsae/BaseModal.vue
 * @Descripttion : 公共弹窗组件
-->
<template>
  <a-modal
    :width="width"
    v-model:visible="visible"
    centered
    :destroyOnClose="true"
    :closable="$slots?.title || title || stitle"
    :maskStyle="{ backgroundColor: 'rgba(77, 124, 254, .15)' }"
    @cancel="handleCancel"
  >
    <!-- 头部 -->
    <template #title v-if="$slots?.title || title || stitle">
      <a-space>
        <BaseTitle :title="title" :stitle="stitle" />
        <slot name="title"></slot>
      </a-space>
    </template>
    <!-- 底部按钮 -->
    <template #footer>
      <div class="footer" :style="[`text-align:${footerAlign}`]">
        <slot name="footer"></slot>
        <template v-if="footer">
          <a-button key="back" @click="handleCancel" :disabled="loading">
            {{ cancelText }}
          </a-button>
          <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
            {{ okText }}
          </a-button>
        </template>
      </div>
    </template>
    <!-- 内容 -->
    <div class="content">
      <slot></slot>
      <slot name="content"></slot>
    </div>
  </a-modal>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  title: { type: String, default: '' },
  stitle: String,
  width: { type: Number, default: 0 },
  footer: { type: Boolean, default: true },
  footerAlign: { type: String, default: 'right' },
  okText: { type: String, default: '确认' },
  cancelText: { type: String, default: '取消' },
})

let visible = ref(false)
let loading = ref(false)

const router = useRouter()

router.afterEach((to, from, next) => {
  hide()
})

const emit = defineEmits(['ok', 'close'])

const show = () => {
  visible.value = true
}

const hide = () => {
  visible.value = false
  loading.value = false
}

const handleOk = e => {
  console.log('弹窗点击确认')
  loading.value = true
  emit('ok', { code: true })
  setTimeout(() => {
    loading.value = false
  }, 60000)
}

const handleCancel = e => {
  console.log('弹窗点击关闭')
  visible.value = false
  emit('close', e)
}

defineExpose({ show, hide, loading: e => (loading.value = e) })
</script>

<style lang="less" scoped>
.content {
  max-height: calc(100vh - 185px);
  overflow: auto;
}
.footer {
  position: relative;
}
</style>
